<template>
  <span :class="{ button: true, normalButton: !isOrange, orangeButton: isOrange}">
      {{ text }}
  </span>
</template> 

<script>
export default {
  name: 'my_button',
  props: {
    text: {
        type: String,
        default: '退换货申请'
    },
    isOrange: {
        type: Boolean,
        default: false,
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">

@import	"../../css/common";

.button {
    height: 50px;
    width: 150px;
    border-radius: 25px;
    margin-left: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
}
.normalButton {
    color: @color_gray;
    &:hover {
     background-color: #f6f6f6;
    }
    border: 2px solid @color_gray;
}
.orangeButton {
    color: @color_orange;
    &:hover {
     background-color: #fef5eb;
    }
        border: 2px solid @color_orange;
}
</style>
